<template>
  <div class="register">
    <van-nav-bar
      title="志愿者注册"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-field
      v-model="name"
      placeholder="以字母开头,由数字和字母组成"
      label="用户名"
      input-align="right"
      @blur="checkname"
    />
    <van-field
      v-model="pwd"
      placeholder="必须包含大小写字母和数字"
      label="密码"
      input-align="right"
      @blur="checkpwd"
      type="password"
    />
    <van-field
      v-model="dbpwd"
      placeholder="请再次输入密码"
      label="确认密码"
      input-align="right"
      type="password"
      @blur="checkdbpwd"
    />
    <van-field
      v-model="email"
      placeholder="请输入邮箱"
      label="电子邮箱"
      input-align="right"
      style="margin-bottom: 10px"
      @blur="checkemail"
    />

    <van-field
      readonly
      clickable
      label="国家/地区"
      placeholder="请选择国家或地区"
      @click="showPicker = true"
      input-align="right"
      right-icon="arrow"
      v-model="state"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <van-field
      v-model="realName"
      label="真实姓名"
      input-align="right"
      placeholder="请输入真实姓名"
    />
    <van-field
      :value="data"
      label="证件类型"
      input-align="right"
      placeholder="请选择证件类型"
      right-icon="arrow"
      id="zjlx"
      readonly
    />
    <van-field
      v-model="ID_Number"
      label="身份证号"
      input-align="right"
      @blur="ID_check"
      placeholder="请输入证件号码"
    />
    <!-- 性别 -->
    <van-field
      label="性别"
      right-icon="arrow"
      readonly
      v-model="sex"
      placeholder="请选择性别"
      input-align="right"
      @click="showSex = true"
    />
    <van-popup v-model="showSex" position="bottom">
      <van-picker
        show-toolbar
        :columns="sex_columns"
        @cancel="showSex = false"
        @confirm="checkSex"
      />
    </van-popup>
    <!-- 生日 -->
    <van-field
      label="出生日期"
      input-align="right"
      placeholder="请选择出生日期"
      right-icon="arrow"
      readonly
      @click="showTime = true"
      v-model="time"
    />
    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="showTime = false"
        @confirm="checkTime"
      />
    </van-popup>
    <van-field
      v-model="tel"
      type="tel"
      label="手机"
      placeholder="请填写手机号"
      input-align="right"
      @blur="checktel"
    />

    <van-button
      type="info"
      size="large"
      round
      style="margin-top: 30px"
      @click="zc"
      >申请成为实名制志愿者</van-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      pwd: "",
      dbpwd: "",
      email: "",
      showPicker: false,
      showSex: false,
      showTime: false,
      ID_Number: "",
      realName: "",
      data: "内地居民身份证",
      columns: ["中国", "中国香港", "中国澳门", "中国台湾", "日本"],
      sex: "",
      time: "",
      tel: "",
      state: "中国",
      sex_columns: ["男", "女"],
      currentDate: new Date(),
    };
  },
  mounted() {
    console.log("111", this.$store.state);

    console.log("333", window.sessionStorage.getItem("username"));
  },
  methods: {
    checkname() {
      let check = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (!check.test(this.name)) {
        this.$toast(
          "用户名有误,长度需为5~16字符,需字母开头,且只能由字母、数字和下划线组成"
        );
        return 0;
      }
      return 1;
    },
    checkpwd() {
      let check = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/;
      if (!check.test(this.pwd)) {
        this.$toast("密码有误,密码必须包含大小写字母和数字,长度需为6~16字符");
        return 0;
      }
      return 1;
    },
    checkdbpwd() {
      let check = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/;
      if (!check.test(this.dbpwd) || this.dbpwd != this.pwd) {
        this.$toast("密码不相同");
        return 0;
      }
      return 1;
    },
    checkemail() {
      let check = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!check.test(this.email)) {
        this.$toast("邮箱有误");
        return 0;
      }
      return 1;
    },
    checktel() {
      let check = /^1[3-9]\d{9}$/;
      if (!check.test(this.tel)) {
        this.$toast("电话号码有误");
        return 0;
      }
      return 1;
    },
    zc() {
      if (
        this.name &&
        this.pwd &&
        this.dbpwd &&
        this.email &&
        this.realName &&
        this.ID_Number &&
        this.sex &&
        this.time &&
        this.tel
      ) {
        if (
          this.checkname() &&
          this.checkpwd() &&
          this.checkdbpwd() &&
          this.checkemail() &&
          this.checktel()
        ) {
          let url = "/register";
          let gender = "";
          this.sex == "男" ? (gender = 1) : (gender = 0);
          let params = `username=${this.name}&password=${this.pwd}&phone=${this.tel}&email=${this.email}&nation=${this.state}&realname=${this.realName}&idtype=${this.data}&idnum=${this.ID_Number}&gender=${gender}&birthday=${this.time}`;
          this.axios.post(url, params).then((res) => {
            if (res.data.code == 200) {
              this.$toast("注册成功");
              window.sessionStorage.setItem("name", this.name);
              this.$router.push("/");
            } else {
              this.$toast("用户名重名 ");
            }
          });
        }
      } else {
        this.$toast("所有项都需要填写");
      }
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/login");
    },
    onConfirm(value) {
      this.state = value;
      this.showPicker = false;
    },
    //检查身份证号
    ID_check() {
      let zz = /^\d{18}$/;
      if (!zz.test(this.ID_Number)) {
        this.$toast("不是正确的身份证号码");
      }
    },
    checkSex(value) {
      this.sex = value;
      this.showSex = false;
    },
    checkTime(value) {
      let day = this.moment(value).format("YYYY-MM-DD");
      this.time = day;
      this.showTime = false;
    },
  },
  watch: {
    state(newValue, oldValue) {
      if (newValue == "中国") {
        this.data = "内地居民身份证";
      } else if (newValue == "中国香港") {
        this.data = "香港居民身份证";
      } else if (newValue == "中国澳门") {
        this.data = "澳门居民身份证";
      } else if (newValue == "中国台湾") {
        this.data = "台湾居民身份证";
      } else {
        this.data = "护照";
      }
    },
  },
};
</script>

<style scoped>
/* div.register{background-color: gray;} */
.register.van-popup--center.van-popup--round {
  border-radius: 6px;
  width: 215px;
  line-height: 30px;
  height: 30px;
  text-align: center;
}
.register span {
  font-size: 16px;
}
</style>